[#ftl]
[@define "agile.TemplateIconPane" "agile.WidgetIconPane"]
	_templates:null,name:"My_Widgets"
	,constructor:function(){
//		this.helpText = agile.i18n("template_help",null,"Use the template to create your own widgets");
		
		this._templateIcons = {}
		this.subscribe("agile.command.Template",function(action,template){
			this[action](template);
		});
		this.subscribe("agile.template.update",function(widget,name,value){
			if(name == "name"){
	    		for(var e in this._templateIcons){
	    			if(this._templateIcons[e].description == value){
	    				topic.publish("agile.message","error",null,agile.i18n("duplicate_template",[value],true),null);
	    				return;
	    			}
	    		}
				widget.set(name,value);	
			}
//			else if(name == "title"){
//				var group = widget.metadata("parameters.group");
//				if(this._templateIcons[group]){//existing template
//					this._templateIcons[group].title = widget.metadata("parameters.name") + "\n" + value;
//				}
//				widget.set(name,value);
//			}
		});
	}    
	,init:function(){
		this.inherited(arguments);

		this.getTitleNode().title = agile.i18n("template_help",null,"Use the template to create your own widgets");
		
		this._templateParams = [];
		if(!window.ls["agile.Template"]){
			this._templateParams.push({"group":"agile.TemplateWidget()","name":agile.i18n("Template",null,true)});
			//window.ls["agile.Template"] = '{"group":"agile.TemplateWidget()","name":"'+agile.i18n("Template",null,true)+'"};';
			window.ls["agile.Template"] = agile.toJson({"templates":this._templateParams});
		}else{			
			if(window.ls["agile.Template"].indexOf("};") != -1){//migrate old version data
				var tpl = window.ls["agile.Template"].split(";");
				for(var i = 0; i < tpl.length; i++){
					if(tpl[i]){
						var param = json.parse(tpl[i],false);
						if(!param.name){
							param.name = param.description;
						}
						this._templateParams.push();
					}
				}
			}else{
				var params = json.parse(window.ls["agile.Template"],false);			
				if(!params.templates){
					this._templateParams.push({"group":"agile.TemplateWidget()","name":+agile.i18n("Template",null,true)});
					window.ls["agile.Template"] = agile.toJson({"templates":this._templateParams});
				}else{
					this._templateParams = params.templates;	
				}
			}
		}
		 
		var source = kernel.global[this.sourceId];
		for(var i = 0; i < this._templateParams.length; i++){			
			var param = this._templateParams[i];
			var icon = new agile._WidgetIcon({
				widgetClass:"agile.TemplateWidget"
					,template:param.group
					,name:param.name
					,description:param.name
					,iconClass:"template"
			},null);
							
			icon.placeAt(source.node,"last");			
			icon.startup();								
			this._templateIcons[param.group] = icon;
		}	
		
		source.sync();
		this.repositionIcons({w:200});
		
//		if(this.buttonWidget){
//			this.buttonWidget.focusNode.title = agile.i18nTooltip("TemplateWidget",{},true);
//		}		
	}
    ,saveTemplate:function(template){    	    	
    	var tplGroup = template.metadata("parameters.group");
//    	if(!tplGroup){//assign group for new template
//    		tplGroup = "tpl" + (new Date().getTime());
//    	}
    	if(window.ls[tplGroup]){//update existing template
    		//persist the template
        	window.ls[tplGroup] = template.toHtml({cascade:true,indentCount:0,sourceType:"agile"});           	
        	        	
			var group = template.metadata("parameters.group");
			var name = template.metadata("parameters.name");
			if(this._templateIcons[group]){//existing template
				//sync the new name to parameters and icon 
	        	for(var i = 0; i < this._templateParams.length; i++){
	        		if(this._templateParams[i].group == group && this._templateParams[i].name != name){
	        			this._templateParams[i].name = name;
	        			window.ls["agile.Template"] = agile.toJson({"templates":this._templateParams});
	        			this._templateIcons[group].set("title",name);
	        			break;
	        		}
	        	}
			}
			
			topic.publish("agile.template.sync-"+tplGroup,template);			
    	}
    	else{//add new template    		
    		var name = template.metadata("parameters.name");
    		//check if any existing template with the same name
    		for(var e in this._templateIcons){
    			if(this._templateIcons[e].name == name){
    				topic.publish("agile.message","error",null,agile.i18n("duplicate_template",[name],true),null);
    				return;
//    				template.metadata("parameters.name",name + "- Copy");
//    				break;
    			}
    		}
	    	var source = kernel.global[this.sourceId];
			var icon = new agile._WidgetIcon({
				widgetClass:"agile.TemplateWidget"
					,template:tplGroup
					,name:template.name
					,description:template.name
					,iconClass:"template"
			},null);
			icon.placeAt(source.node,"last");			
			source.sync();
			icon.startup();
			this.repositionIcons({w:200});
			this._templateIcons[tplGroup] = icon;
			
			//persist the template
//			if(newTplGroup){
//				window.ls[tplGroup] = template.toHtml(true,0,"agile").replace(template.metadata("parameters.group"),newTplGroup);
//			}else{
				window.ls[tplGroup] = template.toHtml({cascade:true,indentCount:0,sourceType:"agile"});
//			}
			
	    	//window.ls["agile.Template"] +=  "{"+lang.replace('"group":"{group}","name":"{name}"',{group:tplGroup,name:template.metadata("parameters.name")})+"};";
			this._templateParams.push({"group":tplGroup,"name":template.metadata("parameters.name")});
	    	window.ls["agile.Template"] = agile.toJson({"templates":this._templateParams});
		}    	
    	
    	topic.publish("agile.message","info",null,"i18n_template_saved",null);
    }
    ,editTemplate:function(template){
    	template.editTemplate(true);
    }
    ,repositionIcons:function(size){
    	//{l: 10, t: 150, w: 320, h: 439}		
    	var width = size.w;
    	var iconSize = {w:40,h:40};
//    	var icons = query(".widgetIcon",this.domNode);
//    	//console.log(this.declaredClass,"@@icons.length=",icons.length);
//    	if(icons.length == 0){
//    		return;
//    	}
//    	var width = agile.calcSize(this.domNode).w;    	
//    	var iconSize = agile.calcSize(icons[0]);
    	var itemCountPerRow = Math.floor((width - 10) / (iconSize.w + 2));
    	//console.log(this.declaredClass,width,iconSize.w,iconSize.h,itemCountPerRow,this._currentItemCountPerRow);
    	//if(itemCountPerRow != this._currentItemCountPerRow){    		
    		//this._currentItemCountPerRow = itemCountPerRow; 
    		var icons = query(".widgetIcon",this.domNode);
        	array.forEach(icons,function(icon,index){
        		var left = (index % itemCountPerRow) * (iconSize.w);
        		var top = Math.floor(index /itemCountPerRow) * (iconSize.h);
        		//console.log("index=",index,p);
        		style.set(icon,{position:"absolute",left:left+"px",top:top+"px"});   
        	});	
    	//}
    }
//    ,getDefaultLocation:function(){
//    	return {left:"690px",top:"100px"};		 
//    }
//    ,getResizableSize:function(){
//		return {height:"200px",width:"300px"};		 
//	}
[/@]
